<template>
  <div>
    <div>
      <a-tabs hideAdd :tabBarGutter='8'
              type="editable-card"
              v-model:activeKey="data.activeKey"
              @change=clickMultiTab>
          <a-tab-pane v-for="(tab,index) in data.pages" :key="tab.fullPath" >
              <template v-slot:tab >
                    <a-dropdown :trigger= "['contextmenu']">
                        <template v-slot:overlay>
                            <a-menu>
                                <a-menu-item @click="onCloseThat(tab,index)">
                                    关闭当前标签
                                </a-menu-item>
                                <a-menu-item @click="onCloseRight(tab,index)">
                                    关闭右侧
                                </a-menu-item>
                                <a-menu-item @click="onCloseLeft(tab,index)">
                                    关闭左侧
                                </a-menu-item>
                                <a-menu-item @click="onCloseAll(tab,index)">
                                    关闭全部
                                </a-menu-item>
                            </a-menu>
                        </template>
                        <span>{{tab.name}}</span>
                    </a-dropdown>
                </template>
          </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import { defineComponent, reactive, watch } from 'vue'
import { cloneDeep } from 'lodash'

export default defineComponent({

    props: {
        selectedKeys: {
            type: Object,
            immediate: true
        }
    },

    setup (props, { emit }) {
        const data = reactive({
            activeKey: '',
            fullPathList: [],
            pages: [],
            tabBarStyle: {
                background: '#FFF',
                margin: 0,
                paddingLeft: '16px',
                paddingTop: '1px'
            }
        })

        // 首次进入需加入路由
        const route = useRoute()
        data.pages.push(cloneDeep(route))
        data.fullPathList.push(route.fullPath)
        selectedLastPath()
        function selectedLastPath () {
            data.activeKey = data.fullPathList[data.fullPathList.length - 1]
        }

        // 监听内容menuLayout传值
        watch(() => props.selectedKeys, (value) => {
            if (value && Array.isArray(value)) {
                data.activeKey = value[0]
            }
        })

        // 替换路由
        const router = useRouter()
        watch(() => data.activeKey, (nv) => {
            if (nv) {
                router.push({ path: nv })
            }
        })

        // 监听路由变化
        onBeforeRouteUpdate ((nv, ov) => {
            data.activeKey = nv.fullPath
            if (data.fullPathList.indexOf(nv.fullPath) < 0) {
                data.fullPathList.push(nv.fullPath)
                data.pages.push(cloneDeep(nv))
            }
        })

        // 按钮点击事件
        function clickMultiTab (value) {
            if (!value) {
                throw new Error('数据异常！！')
            }
            data.activeKey = value
            emit('ChangeActiveKey', data.activeKey)
        }

        function onCloseThat (item, index) {
            if (data.fullPathList.length > 1) {

            }
        }

        return {
            data,
            clickMultiTab,
            onCloseThat
        }
    }
})
</script>
<style scoped>

</style>
